<div *ngIf="!loading">
  <ng-container *ngIf="project.permission === permissionEnum.READ_WRITE_EXECUTE">
      <h3>
          <app-warning-mark-list [warnings]="unusedVariableWarning"></app-warning-mark-list>
          {{ 'project_variable_form_title' | translate }}
      </h3>
      <app-variable-form (createVariableEvent)="variableEvent($event)" [loading]="varFormLoading"></app-variable-form>
  </ng-container>
  <div>
      <h3>
          {{ 'project_variable_list_title' | translate }}
      </h3>
      <app-variable [project]="project" [variables]="project.variables" [mode]="project.permission === permissionEnum.READ_WRITE_EXECUTE? 'edit': 'ro'" (event)="variableEvent($event)" auditContext="project" [warnings]="variableWarning"></app-variable>
  </div>
  <app-warning-modal [title]="'warning_modal_title' | translate" [msg]="'warning_modal_body' | translate" (event)="variableEvent($event, true)" #varWarning></app-warning-modal>
</div>
<div *ngIf="loading" class="ui text active loader">Loading variables...</div>
